<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="father">
    <div id="son">123123</div>
  </div>

  <script>
    // 事件执行： 有事件流存在
    // 1. 捕获
    // 2. 事件执行
    // 3. 冒泡

    // 1 2
    // 2 3

    var father = document.querySelector('#father')
    var son = document.querySelector('#son')

    // 如果想捕获阶段执行行 必须使用 addEventLisnter
    // 捕获
    // son.addEventListener('click', function() {
    //   console.log('sonsonsons')
    // }, true)

    // father.addEventListener('click', function() {
    //   console.log('fafafafafafafa')
    // }, true)

    // 冒泡
    // father.addEventListener('click', function() {
    //   console.log('fafafafafafafa')
    // })
    // son.addEventListener('click', function() {
    //   console.log('sonsonsons')
    // })


  </script>
</body>
</html>